<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <title>oh my vue</title>
    <script src="js/vue.min.js"></script>
</head>

<body>

    <div id="example">

        <div class="search">
            <input v-model="searchStr" placeholder="请输入图书名">
        </div>

        <div>

            <div class="item" v-for="book in results">

                <img :src="book.image">

                <span> {{book.bookname}}</span>

            </div>

        </div>

    </div>

    <script>

        var exam = new Vue({

            el: '#example',

            data: {

                searchStr: "", // 搜索关键字

                books: [//{// 图书信息数组

                    // bookname: 'Web 数据可视化 echarts',

                    // image: './images/echarts.jpg'

                    // }, 
                    {

                        bookname: '知识图谱与深度学习',

                        image: './images/deepLearn.jpg'

                    }, {

                        bookname: '视觉 SLAM 十四讲',

                        image: './images/slam.jpg'

                    }, {

                        bookname: '.NET 框架应用开发',

                        image: './images/netFrame.jpg'

                    }, {

                        bookname: 'Python 程序设计',

                        image: './images/python.jpg'

                    }, {

                        bookname: '嵌入式 Linux 驱动开发教程',


                        image: './images/linux.jpg'

                    }]
            },

            computed: {

                results: function () {
                    var books = this.books; if (this.searchStr == "") { return books; }

                    var searchStr = this.searchStr.trim().toLowerCase();
                    books = books.filter(function (ele) {


                        if (ele.bookname.toLowerCase().indexOf(searchStr) != -1) {
                            return ele;

                        }
                    });

                    return books;
                }
            }

        })
    </script>

</body>

</html>